<template>
	<view class="typeTabs">
		<view :class="['typeTag',index==chooseIndex?'select':'',index==chooseIndex+1?'border-left':'']" v-for="(item,index) in list" :key="index" @click="choose(index)">{{item}}</view>
	</view>
</template>

<script>
export default {
	name: 'typeTabs',
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		chooseIndex:{
			type: [Number, String],
			default: 0
		}
	},
	methods: {
		choose(index) {
			this.$emit('changeOther',index);
		}
	}
};
</script>

<style lang="scss" scoped>
	.typeTabs {
		display: flex;
		align-items: center;

		.typeTag {
			font-size: 24rpx;
			color:#999999;
			padding: 8rpx 18rpx;
			border: 1px solid #d5d5d5;
			border-right-width: 0;
		}
		
		.typeTag:first-child{
			border-radius: 2px 0px 0px 2px;
		}
		
		.typeTag:last-child{
			border-radius: 0px 2px 2px 0px;
			// border-right-color: #d5d5d5;
			border-right-width: 1px;
		}
		
		.select{
			color: #0091ff;
			border-color: #0091ff !important;
		}
		
		.border-left{
			border-left-color: #0091ff !important;
		}
	}
</style>
